<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col
        :span="12"
        class="card-box"
        style="background-color: lavender; border-radius: 5px; height: 220px"
      >
        <el-card
          style="
            background: #ff9966;
            width: 100%;
            height: 90%;
            margin-top: 10px;
          "
        >
          <div slot="header">
            <span
              style="
                font-size: larger;
                font-weight: bold;
                color: white;
                float: left;
              "
              >当月商城数据</span
            >
          </div>

          <div
            style="
              align-items: center;
              justify-content: center;
              text-align: center;
              display: flex;
            "
          >
            <div class="cmdb-stat">
              132445 <br />
              浏览量
            </div>
            <div
              class="cmdb-stat"
              @click="gotoList('/cmdb/cmdbDatabaseInstance')"
            >
              56753<br />
              访客数
            </div>
            <div class="cmdb-stat" @click="gotoList('/cmdb/cmdbDatabase')">
              603532<br />
              成交金额
            </div>
            <div
              class="cmdb-stat"
              @click="gotoList('/cmdb/cmdbMiddleware/redis')"
            >
              1670<br />
              成交人数
            </div>

            <div
              class="cmdb-stat"
              @click="gotoList('/cmdb/cmdbMiddleware/mongodb')"
            >
              1903<br />
              成交商品数
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col
        :span="12"
        class="card-box"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          background-color: blanchedalmond;
          border-radius: 5px;
          height: 220px;
        "
      >
        <button
          class="property-stat"
          style="background: limegreen; margin-left: 0px"
          @click="gotoList('/deploy/application')"
        >
          1803209 <br />
          总浏览量
        </button>
        <button
          class="property-stat"
          style="background: rgb(25 127 215)"
          @click="gotoList('/deploy/artifact')"
        >
          704506<br />
          总访客数
        </button>
        <button
          class="property-stat"
          style="background: #7f3ce9"
          @click="gotoList('/deploy/releaseVersion')"
        >
          9023002<br />
          总成交金额
        </button>
        <button
          class="property-stat"
          style="background: #00b0e5"
          @click="gotoList('/deploy/ota/otaClient')"
        >
          23230<br />
          总成交商品数
        </button>
      </el-col>

      <el-col :span="12" class="card-box deploy-list">
        <div style="font-size: large; font-weight: bold">最近7天销售商品</div>
        <br />

        <div
          ref="deployList"
          id="deployList"
          style="height: 100%; width: 100%"
        />
      </el-col>

      <el-col :span="12" class="card-box deploy-list">
        <div style="font-size: large; font-weight: bold">
          最近7天销售商品列表
        </div>
        <br />
        <el-table :data="releaseVersionRecent" height="90%" style="width: 100%">
          <el-table-column
            align="left"
            type="index"
            label="No"
            width="50px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="name"
            label="商品名称"
            width="200px"
          >
          </el-table-column>
          <el-table-column align="left" prop="type" label="商品类型">
          </el-table-column>
          <el-table-column
            align="center"
            prop="attr"
            label="商品配置"
            width="160px"
          >
          </el-table-column>
          <el-table-column align="center" prop="num" label="成交数量">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-divider />

    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'spulist',
  dicts: ['application_type'],
  data() {
    return {
      // 版本号
      tableData: [],
      myChart: null,
      option: null,
      deployList: {
        x: [
          '2022-06-16',
          '2022-06-17',
          '2022-06-18',
          '2022-06-19',
          '2022-06-20',
          '2022-06-21',
          '2022-06-22',
        ],
        y: [180, 140, 99, 300, 230, 204, 69],
      },
      cmdbCapitals: {},
      deployCapitals: {},
      releaseChartRecent: [],
      releaseVersionRecent: [
        {
          name: '华为 HUAWEI Mate 30 Pro',
          type: '手机',
          attr: '星河银 8GB+256GB',
          num: '180',
        },
        {
          name: '华为 HUAWEI Mate 30 Pro',
          type: '手机',
          attr: '星河银 8GB+128GB',
          num: '160',
        },
        {
          name: '华为 HUAWEI Mate 30 Pro',
          type: '手机',
          attr: '亮黑色 8GB+256GB',
          num: '140',
        },
        {
          name: '华为 HUAWEI Mate 30 Pro',
          type: '手机',
          attr: '亮黑色 8GB+128GB',
          num: '110',
        },
        {
          name: '华为 HUAWEI Mate 30 Pro',
          type: '手机',
          attr: '翡冷翠 8GB+256GB',
          num: '107',
        },
        {
          name: 'Apple iPhone 11 (A2223)',
          type: '手机',
          attr: '黑色 128GB',
          num: '98',
        },
        {
          name: 'Apple iPhone 11 (A2223)',
          type: '手机',
          attr: '黑色 256GB',
          num: '88',
        },
        {
          name: 'Apple iPhone 11 (A2223)',
          type: '手机',
          attr: '黑色 64GB',
          num: '70',
        },
        {
          name: 'Apple iPhone 11 (A2223)',
          type: '手机',
          attr: '白色 128GB',
          num: '60',
        },
        {
          name: 'Apple iPhone 11 (A2223)',
          type: '手机',
          attr: '白色 256GB',
          num: '49',
        },
      ],
      applicationTop: [],
      artifactTop: [],
    };
  },
  created() {
    this.getList();
    this.openLoading();
  },
  methods: {
    getList() {
      let xy = {
        x: [
          '2022-06-16',
          '2022-06-17',
          '2022-06-18',
          '2022-06-19',
          '2022-06-20',
          '2022-06-21',
          '2022-06-22',
        ],
        y: [180, 140, 99, 300, 230, 204, 69],
      };

      this.$modal.closeLoading();
      this.deployList = echarts.init(this.$refs.deployList, 'macarons');
      this.deployList.setOption(mixedLineBarOption(xy));
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading('正在加载数据，请稍候！');
    },
    goTarget(href) {
      window.open(href, '_blank');
    },
  },
};
</script>

<style scoped lang="scss">
.deploy-list {
  height: 550px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 10px;
}
.table-height {
  height: 500px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 100px;
}
.property-stat {
  cursor: pointer;
  height: 180px;
  width: 180px;
  float: left;
  margin-left: 20px;
  font-size: large;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
}
.cmdb-stat {
  cursor: pointer;
  height: 130px;
  width: 20%;
  float: left;
  font-size: large;
  font-weight: bold;
  color: white;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
